<div class="order-details-container" th:object="${order}">
    <ul class="shipping-groups">
     <li >
            <h3>Order Summary</h3>
            <div class="details">

                <table class="order-items">
                    <tr>
                        <th class="label">Items</th>
                        <th class="price">Price</th>
                    </tr>
                   <div th:each="orderItem : *{orderItems}" th:object="${orderItem}" th:remove="tag">
                   <tr >
                    
                        <td class="label" th:text="${orderItem.quantity} + ' of ' + ${orderItem.name}"></td>
                        <td class="price" blc:price="${orderItem.totalPrice}"></td>
                        
                    </tr>
                    <tr >
                      <td>
                        <div th:object="${orderItem}" th:remove="tag">
                            <div class="productOptions" th:substituteby="catalog/partials/offers :: orderDetails"/>
                          
                         </div>
                      </td>
                      <td></td>
                    </tr>
                    
                    </div>
                    <tr class="shipment-summary merchandise-total">
                        <td class="label">Merchandise Total:</td>
                        <td class="price" blc:price="${order.subTotal}"></td>
                    </tr>
                    <!--<tr class="shipment-summary">
                        <td class="label">Promotions Applied:</td>
                        <td class="price" blc:price="${order.totalAdjustmentsValue}"></td>
                    </tr>-->
                    <tr class="shipment-summary">
                        <td class="label">Shipping Total:</td>
                        <td class="price" blc:price="${order.totalShipping}"></td>
                    </tr>
                    <tr class="shipment-summary taxes">
                        <td class="label">Taxes:</td>
                        <td class="price" blc:price="${order.totalTax}"></td>
                    </tr>
                    <tr class="grand-total">
                        <td class="label">Grand Total:</td>
                        <td class="price" blc:price="${order.total}"></td>
                    </tr>
                </table>
                <div class="clearfix">&nbsp;</div>
            </div>
        </li>
    
        <li th:each="fulfillmentGroup, iterStat : *{fulfillmentGroups}" th:object="${fulfillmentGroup}">
            <div th:unless="*{type?.type == 'GIFT_CARD' or type?.type == 'DIGITAL' or type?.type == 'PHYSICAL_PICKUP'}">
                <h3>Shipment<span th:if="*{status}" th:text="' : ' + *{status}"></span></h3>
                <div class="details">
                    <div class="shipping-information">
                        <div class="fulfillment-group-address" th:inline="text">
                            <h4>Shipping Address</h4>
                            <address th:if="*{address.phonePrimary != null}">
                                [[*{address.firstName}]]&nbsp;[[*{address.lastName}]]<br/>
                                [[*{address.phonePrimary.phoneNumber}]]<br/>
                                [[*{address.addressLine1}]]<br/>
                                [[*{address.addressLine2}]]<br th:if="!*{#strings.isEmpty(address.addressLine2)}"/>
                                [[*{address.city}]],&nbsp;[[*{(address.state != null)?address.state.abbreviation:''}]]&nbsp;[[*{address.postalCode}]]<br/>
                            </address>
                            <address th:if="*{address.phonePrimary == null}">
                                [[*{address.firstName}]]&nbsp;[[*{address.lastName}]]<br/>
                                [[*{address.addressLine1}]]<br/>
                                [[*{address.addressLine2}]]<br th:if="!*{#strings.isEmpty(address.addressLine2)}"/>
                                [[*{address.city}]],&nbsp;[[*{(address.state != null)?address.state.abbreviation:''}]]&nbsp;[[*{address.postalCode}]]<br/>
                            </address>
                        </div>
                        <div class="shipping-type">
                            <h4>Shipping Speed</h4>
                            <div th:text="*{fulfillmentOption.name} + ': ' + *{fulfillmentOption.longDescription}"></div>
                        </div>
                    </div>
                    <table class="order-items">
                        <tr>
                            <th class="label">Items</th>
                            <!--  <th class="price">Price</th>-->
                        </tr>
                       <div th:each="fulfillmentGroupItem, iterStat : *{fulfillmentGroupItems}" th:object="${fulfillmentGroupItem}" th:remove="tag">
                       <tr >
                        
                            <td class="label" th:text="${fulfillmentGroupItem.quantity} + ' of ' + ${fulfillmentGroupItem.orderItem.name}"></td>
                           <!--   <td class="price" blc:price="${fulfillmentGroupItem.orderItem.price}"></td>-->
                            
                        </tr>
                        </div>
                     
                        <tr class="shipment-summary merchandise-total">
                            <td class="label">Shipping SubTotal:</td>
                            <td class="price" blc:price="*{shippingPrice}"></td>
                        </tr>
                        
                    </table>
                    <div class="clearfix">&nbsp;</div>
                </div>
            </div>
        </li>
        <li class="payment-information">
            <h3>Payment Information</h3>
            <div class="details">
                <div class="payment-details" th:each="payment : ${order.payments}" th:object="${payment}" th:inline="text">
                    <div th:if="${payment.active}" class="payment-method">
                        <h4>Payment Method</h4>
                        Payment type: [[*{type.friendlyType}]]<br/>
                        Amount paid: <span blc:price="*{amount}" />
                        <div th:if="${payment.initialTransaction != null}">
                            <div th:if="!*{#strings.isEmpty(initialTransaction.additionalFields['CARD_TYPE'])}">
                            <b th:text="*{initialTransaction.additionalFields['CARD_TYPE']}"/><br/>
                            ****<span th:text="*{initialTransaction.additionalFields['LAST_FOUR']}"/><br/>
                            <span th:text="#{confirmation.exp}">exp.</span> <span th:text="*{initialTransaction.additionalFields['EXP_DATE']}"/>
                            </div>
                            <div th:if="!*{#strings.isEmpty(initialTransaction.additionalFields['ACCOUNT_CREDIT_NUM'])}">
                                <span th:text="#{cart.accountCredit.accounts}">Accounts</span><br/>
                                <b th:text="*{initialTransaction.additionalFields['ACCOUNT_CREDIT_NUM']}"/><br/>
                            </div>
                            <div th:if="!*{#strings.isEmpty(initialTransaction.additionalFields['GIFT_CARD_NUM'])}">
                                <span th:text="#{cart.giftCardNumber}">Gift Card Number</span><br/>
                                <b th:text="*{initialTransaction.additionalFields['GIFT_CARD_NUM']}"/><br/>
                            </div>
                             <div class="billing-address" th:if="*{type.type == 'CREDIT_CARD'}">
                                <address th:if="*{billingAddress.phonePrimary != null}">
                                    [[*{billingAddress.firstName}]]&nbsp;[[*{billingAddress.lastName}]]<br/>
                                    [[*{billingAddress.phonePrimary.phoneNumber}]]<br/>
                                    [[*{billingAddress.addressLine1}]]<br/>
                                    [[*{billingAddress.addressLine2}]]<br th:if="!*{#strings.isEmpty(billingAddress.addressLine2)}"/>
                                    [[*{billingAddress.city}]],&nbsp;[[*{billingAddress.state.abbreviation}]]&nbsp;[[*{billingAddress.postalCode}]]<br/>
                                </address>
                                <address th:if="*{billingAddress.phonePrimary == null}">
                                    [[*{billingAddress.firstName}]]&nbsp;[[*{billingAddress.lastName}]]<br/>
                                    [[*{billingAddress.addressLine1}]]<br/>
                                    [[*{billingAddress.addressLine2}]]<br th:if="!*{#strings.isEmpty(billingAddress.addressLine2)}"/>
                                    [[*{billingAddress.city}]],&nbsp;[[*{billingAddress.state.abbreviation}]]&nbsp;[[*{billingAddress.postalCode}]]<br/>
                                </address>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="order-summary">
                    <tr>
                        <th colspan="2">Order Summary</th>
                    </tr>
                    <tr>
                        <td class="label">Subtotal:</td>
                        <td class="price" blc:price="*{subTotal}"></td>
                    </tr>
                    <tr th:unless="*{orderAdjustmentsValue.zero}">
                        <td class="label">Promotions:</td>
                        <td class="discount price">(<span blc:price="*{orderAdjustmentsValue}"></span>)</td>
                    </tr>
                    <tr>
                        <td class="label">Shipping:</td>
                        <td class="price" blc:price="*{totalShipping}"></td>
                    </tr>
                    <tr class="taxes">
                        <td class="label">Taxes:</td>
                        <td class="price" blc:price="*{totalTax}"></td>
                    </tr>
                    <tr class="grand-total">
                        <td class="label">Grand Total:</td>
                        <td class="price" blc:price="*{total}"></td>
                    </tr>
                </table>
                <div class="clearfix">&nbsp;</div>  
            </div>
        </li>               
    </ul>
</div>